<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=750, user-scalable=0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title>订单评价</title>
    <link rel="stylesheet" href="__PUBLIC__/css/weui.css?t=20141028987051">
    <link rel="stylesheet" href="__PUBLIC__/css/jquery-weui.min.css?t=20141028987051">
    <link href="__PUBLIC__/css/style.css?t=20141028987051" rel="stylesheet">

    <style>
      .layout.fixed {
    padding-bottom: 280px;
}
.btn-confirm {
    border-radius: 10px;
    display: block;
    height: 74px;
    width: 60%;
    margin: 0 auto;
    background-color: #26adec;
    color: #ffffff;
    font-size: 42px;
    border: 0;
    outline: 0;
}
.top{
  margin: 70px 70px;
}
.logo{
  display: inline-block;
}
.orderdesc{
  display: inline-block;
  float: right;
  margin-right: 150px;
}

.orderdesc ul{
 margin-top: 15px;
}

.orderdesc ul li{
line-height: 60px;
}

    </style>
     <style>
.star_bg {
    width: 302px; height: 54px;
    margin: 100px auto;
    background: url(__PUBLIC__/img/star.png) repeat-x;
    position: relative;
    overflow: hidden;
}
.star {
    height: 100%; width: 54px;
    line-height: 6em;
    position: absolute;
    z-index: 3;
}
.star:hover {    
    background: url(__PUBLIC__/img/star.png) repeat-x 0 -54px!important;
    left: 0; z-index: 2;
}
.star_1 { left: 0; }
.star_2 { left: 60px; }
.star_3 { left: 120px; }
.star_4 { left: 180px; }
.star_5 { left: 240px; }
.star_1:hover { width: 60px; }
.star_2:hover { width: 120px; }
.star_3:hover { width: 180px; }
.star_4:hover { width: 240px; }
.star_5:hover { width: 300px; }

label { 
    display: block; _display:inline;
    height: 100%; width: 100%;
    cursor: pointer;
}

/* 幕后的英雄，单选按钮 */
.score { position: absolute; clip: rect(0 0 0 0); }
.score:checked + .star {    
    background: url(star.png) repeat-x 0 -54px;
    left: 0; z-index: 1;
}
.score_1:checked ~ .star_1 { width: 60px; }
.score_2:checked ~ .star_2 { width: 120px; }
.score_3:checked ~ .star_3 { width: 180px; }
.score_4:checked ~ .star_4 { width: 240px; }
.score_5:checked ~ .star_5 { width: 300px; }

.star_bg:hover .star {  background-image: none; }

/* for IE6-IE8 JS 交互 */
.star_checked {    
    background: url(star.png) repeat-x 0 -54px;
    left: 0; z-index: 1;
}
body{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

 </style>


</head>

<body>
    <div class="layout fixed" id="page-home">
       <!--  <header>
           <a href="javascript:history.go(-1);" class="link-left">返回</a>
       </header> -->
    
        <div class="top">
            <div class="logo"><img src="__PUBLIC__/img/logo.png" alt="" width="120px" height="120px"></div>
            <div class="orderdesc">
                <ul>
                  <li>小型搬家：需要搬运</li>
                  <li>订单金额：{$orderinfo.cost}</li>
                </ul>
            </div>
        </div>
        
        
        <div class="container">

            <form>
            <div id="starBg" class="star_bg">                     
    <input type="radio" id="starScore1" class="score score_1" value="1" name="score">
    <a href="#starScore1" class="star star_1" title="差"><label for="starScore1">差</label></a>
    <input type="radio" id="starScore2" class="score score_2" value="2" name="score">
    <a href="#starScore2" class="star star_2" title="较差"><label for="starScore2">较差</label></a>
    <input type="radio" id="starScore3" class="score score_3" value="3" name="score">
    <a href="#starScore3" class="star star_3" title="普通"><label for="starScore3">普通</label></a>
    <input type="radio" id="starScore4" class="score score_4" value="4" name="score">
    <a href="#starScore4" class="star star_4" title="较好"><label for="starScore4">较好</label></a>
    <input type="radio" id="starScore5" class="score score_5" value="5" name="score">
    <a href="#5" class="star star_5" title="好"><label for="starScore5">好</label></a>
</div>
             <div class="beizhu">
                <textarea name="comment" id="comment" cols="30" placeholder="评论"></textarea>
            </div>
              <button class="btn-confirm" id="sub_comment">提交评论</button>
              </form>
         
        </div>
       
        <div class="layer_notice" style="white-space:normal;">
          
        </div>
    </div>
    <script src="__PUBLIC__/js/jquery.min.js?t=20141028987051"></script>
    <script src="__PUBLIC__/js/jquery-weui.min.js?t=20141028987051"></script>
    <script src="__PUBLIC__/js/layer.js"></script>
    <script>
      $("#sub_comment").click(function () {
        var comment= $("#comment").val();
        if (comment=='') {
           alert('评论内容不能为空');
        return false;
        }
        $.post( '__URL__/pinglun', {
        id:{$orderinfo.id},
        type:'{$Think.get.type}',
        comment:comment

        }, function(data) {
          if (data.status==1) {
             alert('评论成功');
             location.href=data.url;
          }
         
        });
       
      })
    </script>




</body>
</html>
